<template>
  <div class="detail">
    <div class="top-bar">
      <el-button @click="onClickLeft" class="fanhui">返回</el-button>
      <el-button @click="onClickRight" class="shoucang">收藏</el-button>
    </div>
    <hr />
    <img :src="tavern.buildingUrl" alt="套房图片" class="img" />
    <div class="top">
      <h4>{{this.tname}}</h4>
      <div class="info">
        <span>{{tavern.address  }}</span>
        <span class="distance">距离2km</span>
        <span class="price">{{tavern.nightlyRate}} /每晚</span>
      </div>
    </div>
    <div class="content">
      <h5>介绍</h5>
      <p>{{tavern.introduce}}</p>
      <h5>综合评分</h5>
      <div class="rating-container">
        <span class="total-rating">{{tavern.score}}</span>
        <span class="star-rating">
          <i v-for="(star, index) in 5" :class="{'icon-star': star <= totalRating, 'icon-star-empty': star > totalRating}" :key="index"></i>
        </span>
      </div>
      <div class="bar-container">
        <div class="bar-item" v-for="(item, index) in ratingItems" :key="index">
          <span class="bar-label">{{item.label}}</span>
          <div class="bar" :style="{ width: item.value + '%' }"></div>
        </div>
      </div>
      <h5>照片</h5>
      <div class="photo-container">
        <img src="../../../src/assets/images/7.png" alt="套房图片" class="img" />
        <img src="../../../src/assets/images/7.png" alt="套房图片" class="img" />
        <img src="../../../src/assets/images/7.png" alt="套房图片" class="img" />
        <img src="../../../src/assets/images/7.png" alt="套房图片" class="img" />
      </div>
      <h5>评价<span>（{{reviews.length}}）</span></h5>
      <div class="reviews">
        <div class="review-item" v-for="(review, index) in reviews" :key="index">
          <div class="review-header">
            <img :src="review.avatarUrl" alt="用户头像" class="avatar" />
            <div class="reviewer-info">
              <span class="reviewer-name">{{review.username }}&nbsp;&nbsp;&nbsp;&nbsp;评分{{review.rating}}</span>
              <span>{{review.commentTime }}</span>
              <span class="rating">{{review.commentComment }}</span>
            </div>
          </div>
          <div class="review-content">{{review.content}}</div>
        </div>
      </div>
    </div>
    <hr />
    <div class="yd">
      <button @click="bookNow" class="book-button">立即预定</button>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      tname: '',
      tid: '',
      tavern:{},
      totalRating: 9.2, // 综合评分
      ratingItems: [
        {label: "房间", value: 90},
        {label: "服务", value: 95},
        {label: "位置", value: 85},
        {label: "价格", value: 80}
      ],
      reviews: []
    };
  },
  created() {
    this.tid = this.$route.query.tid || '';
    this.tname = this.$route.query.hotelName || '';
    console.log('接收到的酒店名称:', this.tname);
    console.log('接收到的酒店id:', this.tid);
    this.findReviews();
    this.sendTnameToBackend();
  },
  methods: {
    findReviews() {
      this.axios.get('http://localhost:6001/api/reviews/findReviews?tid=' + this.tid,).then(res => {
        this.reviews = res.data;
        // 转换时间格式
        this.reviews.forEach(review => {
          review.commentTime = this.formatDate(review.commentTime);
        });
      })
    },
    sendTnameToBackend() {
      this.axios.get('http://localhost:6001/api/tavern/xq?tname=' + this.tname,).then(res => {
        console.log(res.data)
        this.tavern = res.data;
      })
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("收藏成功");
    },
    bookNow() {
      Toast("预订成功，请前往订单页面查看");
    },
    viewAllPhotos() {
      Toast("查看全部照片功能触发");
    },
    formatDate(dateStr) {
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }
};
</script>
<style scoped>
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background-color: #f8f9fa;
}

.fanhui, .shoucang {
  color: dodgerblue;
}

.reviews {
  margin-top: 1rem;
}

.review-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 1rem;
}

.reviewer-info {
  display: flex;
  flex-direction: column;
}

.reviewer-name {
  font-weight: bold;
}

.rating {
  margin-bottom: 0.2rem;
}

.icon-star {
  color: gold;
}

.icon-star-empty {
  color: #ccc;
}

.review-content {
  color: #666;
  line-height: 1.6;
}

.photo-container {
  display: flex;
  align-items: center; /* 使子元素在垂直方向居中对齐 */
  gap: 10px;
}

.photo-container img {
  max-width: 137px; /* 可以根据需要调整图片最大宽度 */
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.detail {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
}

.top {
  padding: 0.5rem;
  background-color: #f8f9fa;
}

.top h4 {
  margin: 0;
}

.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.distance,
.price {
  color: #666;
}

.content {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

.img {
  width: 100%;
  height: 20vh;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

h5 {
  margin-top: 1rem;
  color: #333;
}

p {
  color: #666;
  line-height: 1.6;
}

.yd {
  align-self: center;
  padding: 1rem;
  text-align: center;
}

.book-button {
  height: 6vh;
  width: 60vw;
  font-size: 1rem;
  background-color: #098f8f;
  border: none;
  border-radius: 3vh;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #077070;
}

.rating-container {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.total-rating {
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 0.5rem;
}

.icon-star {
  color: gold;
}

.icon-star-empty {
  color: #ccc;
}

.bar-container {
  display: flex;
  flex-direction: column;
}

.bar-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.bar-label {
  width: 80px;
  color: #666;
}

.bar {
  height: 10px;
  background-color: #098f8f;
  border-radius: 5px;
  margin-left: 10px;
}

.photo-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.photo-item {
  width: 30%;
}

.photo-thumb {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.view-all {
  display: block;
  text-align: right;
  color: #007bff;
  margin-top: 10px;
}
</style>
